import React,{useEffect} from 'react'
import { BannersWrapper } from './style'
import propTypes from 'prop-types'
import Swiper from 'swiper'
import { Link } from 'react-router-dom'


const Banner=({banners})=>{
    let swiper=null
    useEffect(()=>{
        console.log('++++=');
        // Swiper 不能多次实例化
        if (swiper){
            return
        }
        new Swiper('.btn-banner',{
            loop:true,
            pagination:{
                el:'.swiper-pagination'
            }
        })
    },[])

    const renderBtnBannersPage1=()=>{
        let items=banners.slice(0,10)
        return items.map(item=>{
            return(
                <Link
                to='/eleme/all'
                className='swiper-item'
                key={item.id}
                >
                    <div>
                        <p><img src={item.img} alt="" /></p>
                        <span>{item.title}</span>
                    </div>
                </Link>
            )
        })
    }

    const renderBtnBannersPage2=()=>{
        let items=banners.slice(10,)
        return items.map(item=>{
            return(
                <Link
                to='/eleme/all'
                className='swiper-item'
                key={item.id}
                >
                    <div>
                        <p><img src={item.img} alt="" /></p>
                        <span>{item.title}</span>
                    </div>
                </Link>
            )
        })
    }

    return(
        <BannersWrapper>
            <div className="btn-banner swiper-container">
                <div className="swiper-wrapper">
                    <div className="swiper-slide">
                        {renderBtnBannersPage1()}
                    </div>
                    <div className="swiper-slide">
                        {renderBtnBannersPage2()}
                    </div>
                </div>
                <div className='swiper-pagination'></div>
            </div>
        </BannersWrapper>
    )
}

// 一定要传数据
Banner.propTypes={
    banners:propTypes.array.isRequired
}

export default Banner